<template>
	<view class="wanl-order-list">
		<view class="navbar bg-white">
			<view class="nav-item text-df" v-for="(item, index) in navList" :key="index" :class="{ current: tabCurrentIndex === index }" @tap="tabClick(index)"> {{ item.text }} </view>
		</view>
		
		<wanl-scroll-list ref="list" :option="{page: 1,auto: true,safeArea: true}" @load="load($event,'load')" @refresh="load($event,'refresh')">
			<view class="tab-content">
				<view class="list-scroll-content">
					<!-- 订单列表 -->
					<view class="wanl-coupon">
						<view v-for="(coupon, seat) in cardList" :key="seat" :class="coupon.type" class="item margin-bj radius-bock"  @tap="onDetails(coupon)">
							<image :src="$wanlshop.appstc('/coupon/bg_coupon_3x.png')" class="coupon-bg"></image>
							<image :src="$wanlshop.appstc('/coupon/img_couponcentre_received_3x.png')" class="coupon-sign" v-if="coupon.state"></image>
							<view class="item-left">
								<block v-if="coupon.type == 'reduction' || (coupon.type == 'vip' && coupon.usertype == 'reduction')">
									<view class="colour">
										<text class="text-price"></text>
										<text class="price">{{Number(coupon.price)}}</text>
									</view>
									<view class="cu-tag wanl-gray-dark radius text-sm">
										满{{Number(coupon.limit)}}减{{Number(coupon.price)}}
									</view>
								</block>
								<block v-if="coupon.type == 'discount' || (coupon.type == 'vip' && coupon.usertype == 'discount')">
									<view class="colour">
										<text class="price">{{Number(coupon.discount)}}</text>
										<text class="discount">折</text>
									</view>
									<view class="cu-tag wanl-gray-dark radius text-sm">
										满{{Number(coupon.limit)}}打{{Number(coupon.discount)}}折
									</view>
								</block>
								<block v-if="coupon.type == 'shipping'">
									<view class="colour">
										<text class="price">包邮</text>
									</view>
									<view class="cu-tag wanl-gray-dark radius text-sm">
										满{{Number(coupon.limit)}}元包邮
									</view>
								</block>
							</view>
							<view class="item-right padding-bj">
								<view class="shop" @tap="onShop(coupon.shop_id)">
									<view class="name">
										<text class="wlIcon-dianpu margin-right-xs"></text> {{coupon.shop.shopname}}
									</view>
									<view>
										<text class="wlIcon-fanhui2"></text>
									</view>
								</view>
								<view class="title">
									<view class="cu-tag sm radius margin-right-xs tagstyle">
										{{coupon.type_text}}
									</view>
									<text class="text-cut wanl-gray text-min">{{coupon.name}}</text>
								</view>
								<view class="content text-min">
									<view class="wanl-gray">
										
										<view v-if="coupon.grant != '-1'">
											<text class="wlIcon-dot"></text>目前仅剩余 {{coupon.surplus}} 张
										</view>
										
										<view v-if="coupon.drawlimit != 0">
											<text class="wlIcon-dot"></text>每人仅限领取 {{coupon.drawlimit}} 张
										</view>
										<block v-if="coupon.pretype == 'fixed'">
											<view>
												<text class="wlIcon-dot"></text>生效 {{coupon.startdate}}
											</view>
											<view>
												<text class="wlIcon-dot"></text>结束 {{coupon.enddate}}
											</view>
										</block>
										<block v-if="coupon.pretype == 'appoint'">
											<view v-if="coupon.validity == 0">
												<text class="wlIcon-dot"></text>未使用前 永久 有效
											</view>
											<view v-else>
												<text class="wlIcon-dot"></text>领取后 {{coupon.validity}} 天有效
											</view>
										</block>
									</view>
									<view class="cu-btn sm round line-colour" @tap.stop="onApply(coupon.id)" v-if="coupon.state">
										立即使用
									</view>
									<view class="cu-btn sm round" @tap.stop="onReceive(seat)" v-else>
										立即领取
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</wanl-scroll-list>
	</view>
</template>

<script>
export default {
	data() {
		return {
			cardList:[],
			tabCurrentIndex: 0,
			navList: [
				{
					type: 'reduction',
					text: '满减券'
				},
				{
					type: 'discount',
					text: '折扣券'
				},
				{
					type: 'shipping',
					text: '包邮券'
				}
			]
		};
	},
	methods: {
		// 加载数据
		load(paging,key) {
			let index = this.tabCurrentIndex;
			let navItem = this.navList[index];
			let type = navItem.type;
			uni.request({
				url: '/wanlshop/coupon/getList',
				data: {
					type: type,
					page: paging.page
				},
				success: res => {
					let cardList = res.data.data;
					if(key == 'load') {
						this.cardList = [...this.cardList, ...cardList];
						this.$refs.list.loadSuccess({ list: this.cardList, total: res.data.total });
					} else if(key == 'refresh') {
						this.cardList = cardList;
						this.$refs.list.refreshSuccess({ list: this.cardList, total: res.data.total });
					}
				}
			});
		},
		//顶部tab点击
		tabClick(index) {
			this.tabCurrentIndex = index;
			this.$refs.list.refreshScrollView()
			this.load({page:1},'refresh')
		},
		// 领取优惠券
		async onReceive(seat) {
			let coupon = this.cardList[seat];
			await uni.request({
				url: '/wanlshop/coupon/receive',
				method: 'POST',
				data: {
					id: coupon.id
				},
				success: res => {
					coupon.id = res.data.id;
					this.$set(this.cardList[seat],'state',true)
					this.$wanlshop.msg(res.data.msg);
				}
			});
		},
		onApply(id){
			this.$wanlshop.to(`/pages/user/coupon/apply?id=${id}&state=true`);
		},
		onDetails(data){
			this.$wanlshop.to(`/pages/user/coupon/details?data=${JSON.stringify(data)}`);
		}
	}
};
</script>

<style>
page {
	height: 100%;
}
</style>
